<template>
  <div class="cephalosome">
    <!-- 大屏 -->
    <dv-full-screen-container class="esord">
      <!-- 头部标题 -->
      <div class="header" @click="clickgoreturn">
        <img src="@/assets/img/head.png" />
        <!-- 年月日 时间 星期 -->
        <div class="heder_time">{{ nowDate + " " + nowTime + " " + nowWeek }}</div>
      </div>
      <!-- 内容 -->
      <div class="large-size">
        <!-- 视频 -->
        <div class="large_screen">
          <div class="screen_play">
            <div class="screen_go" @click="clickgoreturn">返回</div>
            <live-player class="video" ref="player" :videoUrl="videoUrl" v-loading="loading" fluent autoplay live stretch></live-player>
            <!-- <video :src="videoUrl" controls width="100%" height="100%" poster="/video/img_cover.png" autoplay></video> -->
          </div>
        </div>
        <div class="rightbox">
          <!-- 云台控制 -->
          <div class="large_tripod">
            <!-- 导航 -->
            <div class="tripod_header">
              <!-- <img src="../assets/img/video_copy.png" alt /> -->
              <div>云台控制</div>
            </div>

            <!-- 圆盘 -->
            <div class="tripod_content">
              <div class="tripod_circle">
                <div class="tripod_disk">
                  <div class="disk_left" @click="ptzControl('left')">左</div>
                  <div class="disk_top" @click="ptzControl('up')">上</div>
                  <div class="disk_concent"></div>
                  <div class="disk_right" @click="ptzControl('right')">右</div>
                  <div class="disk_bottom" @click="ptzControl('down')">下</div>
                </div>
              </div>
            </div>
            <!-- 控制台 -->
            <div class="tripod_chanvebox">
              <div class="tripod_chanve">
                <div class="tripod_symbol">
                  <span>变倍:</span>
                  <span @click="ptzControl('zoomin')">
                    <img src="../assets/img/tripod_plus.png" style="width: 2rem; height: 2rem" />
                  </span>
                  <span @click="ptzControl('zoomout')">
                    <img src="../assets/img/tripod_subtract.png" style="width: 2rem; height: 2rem" />
                  </span>
                </div>
                <div class="tripod_symbol">
                  <span>光圈:</span>
                  <span>
                    <img src="../assets/img/tripod_plus.png" style="width: 2rem; height: 2rem" />
                  </span>
                  <span>
                    <img src="../assets/img/tripod_subtract.png" style="width: 2rem; height: 2rem" />
                  </span>
                </div>
              </div>
              <div class="tripod_chanve">
                <div class="tripod_symbol">
                  <span>聚焦:</span>
                  <span>
                    <img src="../assets/img/tripod_plus.png" style="width: 2rem; height: 2rem" />
                  </span>
                  <span>
                    <img src="../assets/img/tripod_subtract.png" style="width: 2rem; height: 2rem" />
                  </span>
                </div>
                <div class="tripod_symbol">
                  <span>景深:</span>
                  <span>
                    <img src="../assets/img/tripod_plus.png" style="width: 2rem; height: 2rem" />
                  </span>
                  <span>
                    <img src="../assets/img/tripod_subtract.png" style="width: 2rem; height: 2rem" />
                  </span>
                </div>
              </div>
            </div>
          </div>
          <!-- 异常情况 -->
          <div class="large_abnormal">
            <!-- 导航 -->
            <div class="abnormal_header">
              <!-- <img src="../assets/img/video_copy.png" /> -->
              <div>异常情况</div>
            </div>
            <!-- 违规 -->
            <div class="abnormal_getout">
              <div class="abnormal_time">
                <img src="../assets/img/time_aggregate.png" style="width: 3rem; height: 3rem" />
                <div class="abnormal_text">
                  <span>总计违规</span>
                  <span>
                    73
                    <span class="spanone">次</span>
                  </span>
                </div>
              </div>
              <div class="abnormal_time">
                <img src="../assets/img/time_smoking.png" style="width: 3rem; height: 3rem" />
                <div class="abnormal_text">
                  <span>抽烟违规</span>
                  <span>
                    17
                    <span class="spanone">次</span>
                  </span>
                </div>
              </div>
              <div class="abnormal_time">
                <img src="../assets/img/time_helmet.png" style="width: 3rem; height: 3rem" />
                <div class="abnormal_text">
                  <span>安全帽违规</span>
                  <span>
                    21
                    <span class="spanone">次</span>
                  </span>
                </div>
              </div>
              <div class="abnormal_time">
                <img src="../assets/img/time_phone.png" style="width: 3rem; height: 3rem" />
                <div class="abnormal_text">
                  <span>打电话违规</span>
                  <span>
                    35
                    <span class="spanone">次</span>
                  </span>
                </div>
              </div>
            </div>
            <!-- 列表 -->
            <div class="abnormal_list">
              <dv-scroll-board @click="onClickScrollBoard" :config="config" />
            </div>
          </div>
        </div>
        <!-- <div class="large_tripod"></div> -->
      </div>
      <!-- 报警信息------弹框 -->
      <div class="fullscreen" v-if="popup_smoking">
        <div class="popup">
          <div class="popup_header">
            <div>违规视频信息</div>
            <div @click="onClickpopup">
              <img src="../assets/img/popup_close.png" style="width: 28px; height: 28px" />
            </div>
          </div>
          <div class="popup_video">
            <div class="videos">
              <div class="videos_os1">违规视频</div>
              <div class="videos_illegal">
                <video :src="videosForm.videoUrl" controls width="100%" height="100%" poster="/video/img_cover.png" autoplay></video>
              </div>
            </div>
            <div class="videos">
              <div class="videos_os1">抓拍照片</div>
              <div class="videos_imgsrc">
                <el-carousel :autoplay="false" height="13rem">
                  <el-carousel-item v-for="item in videosForm.imgsUrl" :key="item">
                    <img :src="item" style="width: 25rem; height: 13rem" />
                  </el-carousel-item>
                </el-carousel>
              </div>
            </div>
          </div>
          <div class="popup_button">视频识别结果:{{videosForm.type}}</div>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import LivePlayer from '@liveqing/liveplayer'
export default {
  data() {
    return {
      loading: false,
      expList: [],
      pageParams: {},
      videosForm: {
        videoUrl: 'video/工程1.mp4',
        imgsUrl: []
      },
      popup_smoking: false, //抽烟违规
      popup_helmet: false, //安全帽违规
      popup_playphone: false, //玩手机违规
      popup_ringup: false, //打电话违规
      timeInterval: null, // 定时刷新函数 计时
      nowDate: '', // 当前日期
      nowTime: '', // 当前时间
      nowWeek: '', // 当前星期
      videoUrl: 'video/工程1.mp4',
      config: {
        headerBGC: '#od2b35',
        waitTime: 2000,
        rowNum: 5,
        header: ['告警信息', '告警时间', '操作'],
        data: [
          // [
          //   '<span style="color:#fff;font-size:0.8rem">玩手机违规</span>',
          //   '<span style="display: block;color:#FFF000;font-size:0.8rem;margin-left: -10px;">09-07 9:47:15</span>',
          //   '<span style="color:#3FEED9  ;font-size:0.8rem" >查看视频</span>'
          // ],
        ]
      }
    }
  },
  methods: {
    controlPtz(command) {
      return this.$axios({
        method: 'get',
        url: '/ddkj/api/v1/control/ptz',
        params: {
          serial: this.serial,
          code: this.code,
          command: command,
          token: this.token
        }
      })
    },
    // 运控平台操作
    ptzControl(command) {
      this.controlPtz(command).then(res => {
        console.log(res)
        window.setTimeout(() => {
          this.ptzStop()
        }, 100)
      })
    },
    ptzStop() {
      this.controlPtz('stop').then(res => {
        console.log(res)
      })
    },
    // 获取视频流
    getVideoStream() {
      this.loading = true
      this.$axios
        .get('/apiUrl/security/safeStation/getVideoStream', {
          params: {
            gbsCode: this.pageParams.gbsCode
          }
        })
        .then(data => {
          if (data.code == '0') {
            this.code = data.streamData.code
            this.serial = data.streamData.serial
            this.token = data.streamData.token
            this.$axios
              .get('/ddkj/api/v1/stream/start', {
                params: {
                  code: data.streamData.code,
                  serial: data.streamData.serial,
                  token: data.streamData.token
                }
              })
              .then(res => {
                var indexnum = res.FLV.indexOf('10000')
                var fivurl = res.FLV.substr(indexnum + 5)
                this.videoUrl = fivurl || ''
                this.loading = false
                console.log(this.videoUrl, 'this.videoUrl')
              })
          }
        })
    },
    // 违规
    getExpData() {
      this.$axios.get(`/apiUrl/security/safecheckInfo?type=2&area=330281`, {}).then(response => {
        if (response.code == 0) {
          this.expList = response.page.map(item => {
            let arr = []
            // arr.push(`<span style="color:#fff;font-size:0.8rem">${item.stationName}</span>`)
            // arr.push(`<span style="color:#fff;font-size:0.8rem">dd工地</span>`)
            arr.push(`<span style="color:#FFF000 ;font-size:0.8rem">${item.safeTypeName}</span>`)
            arr.push(`<span style="display: block;color:#FFFFFF;font-size:0.8rem;margin-left: -10px;">${item.checkDate}</span>`)
            arr.push(`<span style="color:#3FEED9  ;font-size:0.8rem;cursor:pointer;">查看视频</span>`)
            this.config.data.push(arr)
            return item
          })
          this.config = { ...this.config }
        } else {
          this.$message({
            showClose: true,
            message: response.msg,
            type: 'warning'
          })
        }
      })
    },
    // 点击导航返回上一页
    clickgoreturn() {
      this.$router.back()
    },
    // 点击查看视频
    onClickScrollBoard(obj) {
      this.getExpVideo(this.expList[obj.rowIndex].checkId)
      this.videosForm.type = this.expList[obj.rowIndex].safeTypeName
      this.popup_smoking = true
    },
    getExpVideo(checkId) {
      this.$axios.get('/apiUrl/security/safecheckInfo/' + checkId + '?type=2').then(data => {
        if (data.code == 0) {
          let item = data.safeCheck
          let api = sessionStorage.getItem('intelligenceUrl')
          // this.videosForm.videoUrl = api + item.videoUrlPath
          // this.videosForm.imgsUrl = item.unsafeImgPath.map(item => {
          //   return api + item
          // })
          // 改写死
          this.videosForm.videoUrl = `video/${item.safeType}.mp4`
          this.videosForm.imgsUrl = [`video/${item.safeType}.png`]
        }
      })
    },
    // 点击关闭视频
    onClickpopup() {
      this.popup_smoking = false //抽烟违规
      this.popup_helmet = false //安全帽违规
      this.popup_playphone = false //玩手机违规
      this.popup_ringup = false //打电话违规
    },
    /**
     * 当前系统时间 更新
     * @onIntervalTimeNow ====================  系统时间 每秒更新
     * @onGetTimeNow =========================  系统时间 格式转化及获取
     * */
    onIntervalTimeNow() {
      let that = this
      that.timeInterval = setInterval(() => {
        that.onGetTimeNow()
      }, 1000)
    },
    // 时分秒
    onGetTimeNow() {
      var that = this
      let yy = new Date().getFullYear()
      let mm = new Date().getMonth() + 1
      let dd = new Date().getDate()
      let week = new Date().getDay()
      let hh = new Date().getHours()
      let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
      let ms = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
      if (week == 1) {
        that.nowWeek = '星期一'
      } else if (week == 2) {
        that.nowWeek = '星期二'
      } else if (week == 3) {
        that.nowWeek = '星期三'
      } else if (week == 4) {
        that.nowWeek = '星期四'
      } else if (week == 5) {
        that.nowWeek = '星期五'
      } else if (week == 6) {
        that.nowWeek = '星期六'
      } else {
        that.nowWeek = '星期日'
      }
      that.nowTime = hh + ':' + mf + ':' + ms
      that.nowDate = yy + '-' + mm + '-' + dd
    },
    // 点击数字资产
    balance() {
      window.open('https://amcas.linker.cc/cas/login')
    }
    // 播放器
    // igetVideo() {
    //   let myPlayer = this.$video(myVideo, {
    //     controls: true,
    //     autoplay: false, //自动播放属性,muted:静音播放
    //     //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
    //     preload: "auto", //none不预加载任何数据，直到用户开始播放才开始下载
    //     width: "800px",
    //     height: "400px",
    //     loop: false, //循环
    //     //poster:""//在视频开始播放之前显示的图像的URL
    //   });
    // },
  },
  created() {},
  mounted() {
    this.pageParams = this.$route.query
    this.onIntervalTimeNow()
    this.onGetTimeNow()
    this.getExpData()
    this.getVideoStream()
    // videojs('my-video', function () {
    //   this.play()
    // })
  },
  beforeDestroy() {
    let that = this
    // 销毁计时器
    if (that.timeInterval) {
      clearInterval(that.timeInterval)
      that.timeInterval = null
    }
  },
  components: {
    LivePlayer
  }
}
</script>

<style  scoped>
@import '../assets/css/camera.css';
::v-deep .video-wrapper {
  width: 100% !important;
  height: 100% !important;
}
</style>
